<template>
   <div class="login_container">
       <div class="login_box">
           <!-- 头像区域 -->
           <div class="avatar_box">
               <img src="@/assets/logo.png" alt="头像加载失败！">
           </div>
           <!-- form表单区域 -->
           <el-form ref="loginFromRef" :rules="loginFormRules" class="login_form" :model="loginForm">
               <!-- 用户名 -->
               <el-form-item prop="username">
                  <el-input  v-model="loginForm.username" prefix-icon="iconfont icon-yonghu"></el-input>
               </el-form-item>
               <!-- 密码 -->
               <el-form-item prop="password">
                  <el-input  v-model="loginForm.password" prefix-icon="iconfont icon-mimasuo" type="password"></el-input>
               </el-form-item>
               <!-- 按钮区域 -->
               <el-form-item class="btns">
                  <el-button type="primary" @click="login">登录</el-button>
                  <el-button type="info" @click="resetLoginForm">重置</el-button>
               </el-form-item>

           </el-form>
       </div>
    </div>
</template>

<script>
export default {
data(){
    return {
    // 这是登录表单的数据绑定对象
     loginForm:{
      username:'admin',
      password:'123456'
    },
    // 这是表单的验证规则对象
    loginFormRules:{
     //验证用户名是否合法
      username:[
          {required: true, message:'请输入登录名称', trigger: 'blur'},
          {min: 3, max: 10, message:'长度在 3 到 10 个字符', trigger: 'blur'}
      ],
      //验证密码是否合法
      password:[
          {required: true, message:'请输入登录密码', trigger: 'blur'},
          {min: 6, max: 15, message:'长度在 6 到 15 个字符', trigger: 'blur'}
      ]
    }
    }
},
methods:{
    // 点击重置按钮，重置登录表单
    resetLoginForm(){
        this.$refs.loginFromRef.resetFields();
    },
    //点击登录按钮，进行登陆前的预验证
    login(){
        //async 和 await简化本次promise操作
        // this.$refs.loginFromRef.validate(async (valid)=>{
        //    if(!valid) return;
        //    //解构赋值
        //    const {data:res} = await this.axios.post('login',this.loginForm);
        //    //弹框信息使用
        //    if(res.meta.status !== 200) return this.$message.error('登录失败！');
        //    this.$message.success("登录成功");
        // });

        //模拟
        this.$refs.loginFromRef.validate((valid)=>{
           if(!valid) return;
           //弹框信息使用
           if(this.loginForm.username !== 'admin' || this.loginForm.password !== '123456') return this.$message.error('登录失败！');
           this.$message.success('登录成功！');
           window.sessionStorage.setItem('token',this.loginForm);
           this.$router.push('/home');
        });
        //1,将登录成功之后的 token 保存到客户端的 sessionStorage中
        //1.1, 项目中除了登陆之外的其他API接口，必须在登录之后才能访问
        //1.2, token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        //window.sessionStorage.setItem('token',res.data.token);
        //2,通过编程式导航跳转到后台主页，路由地址是/home
        //this.$router.push('/home');

        //路由导航守卫控制访问权限（只有在登录之后才能访问主页面；如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航在登陆页面）
        
        //退出功能
        //基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可，这样，后续的请求就不会携带 token, 必须重新登录生成一个新的 token 之后才可以访问页面
        //清空 token window.sessionStorage.clear()
        //跳转到登录页面 this.$router.push('/login);
    }
}
}
</script>

<style scoped>
.login_container{
background-color: #2b4b6b;
height:100%;
}
.login_box{
    width:450px;
    height:300px;
    background-color:#FFF;
    border-radius: 3px;
    position:absolute;
    left:50%;
    top:50%;
    /* margin-top:-150px;
    margin-left:-225px; */
    transform:translate(-50%,-50%);
}
.avatar_box{
    width:130px;
    height:130px;
    border-radius: 50%;
    border:2px solid #eee;
    padding:10px;
    box-shadow:0 0 10px #ddd;
    position:absolute;
    left:50%;
    top:0;
    transform: translate(-50%,-50%);
    background-color:#fff;
}
.avatar_box img{
    width:100%;
    height:100%;
    border-radius:50%;
    background-color:#eee;
}
.btns{
   display:flex;
   justify-content: flex-end; 
}
.login_form{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:0 20px;
    box-sizing: border-box;
}
</style>